<!DOCTYPE html>
<html>
  <head>
    <title>OpenLayers - Introduction</title>
    <script>
    var gaProperty = 'UA-2577926-1';
    // Disable tracking if the opt-out cookie exists.
    var disableStr = 'ga-disable-' + gaProperty;
    if (document.cookie.indexOf(disableStr + '=true') > -1) {
      window[disableStr] = true;
    }
    function gaOptout() {
      document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
      window[disableStr] = true;
    }
    function gaOptoutRevoke() {
      document.cookie = disableStr + '=false; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
      window[disableStr] = false;
    }
    </script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
    </script>
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
    <script>
    window.addEventListener("load", function() {
      window.cookieconsent.initialise({
        'palette': {
          'popup': {
            'background': '#eaf7f7',
            'text': '#5c7291'
          },
          'button': {
            'background': '#56cbdb',
            'text': '#ffffff'
          }
        },
        'theme': 'edgeless',
        'type': 'opt-out',
        'onInitialise': function (status) {
          if (!this.hasConsented()) {
            gaOptout()
          }
        },
        'onStatusChange': function(status, chosenBefore) {
          if (!this.hasConsented()) {
            gaOptout()
          }
        },
        'onRevokeChoice': function() {
          gaOptoutRevoke()
        }
      })
    });
    </script>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
    <script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href='../../../../assets/theme/site.css' rel='stylesheet' type='text/css'>
    <link rel="icon" type="image/x-icon" href="../../../../assets/theme/img/favicon.ico" />
    
  </head>
  <body>
    <header class="navbar navbar-expand-md navbar-dark mb-3 py-0 fixed-top" role="navigation">
      <a href='/' class='navbar-brand'><img src='../../../../assets/theme/img/logo70.png'>&nbsp;OpenLayers</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- menu items that get hidden below 768px width -->
      <nav class="collapse navbar-collapse" id="olmenu">
        <ul class='nav navbar-nav  ml-auto'>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle active" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
            <div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="docdropdown">
              <a class="dropdown-item" href="/en/latest/doc/">Docs</a>
              <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="/en/latest/doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
                <a class="dropdown-item" href="/en/latest/doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
                <a class="dropdown-item" href="/en/latest/doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
                <a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
            </div>
          </li>
          <li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
          <li class="nav-item"><a class="nav-link" href="/en/latest/apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
            <div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="codedropdown">
              <a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
              <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
            </div>
           </li>
        </ul>
      </nav>
    </header>
    

<div class='container'>
<h1 id="introduction">Introduction</h1>
<h2 id="objectives">Objectives</h2>
<p>OpenLayers is a modular, high-performance, feature-packed library for displaying and interacting with maps and geospatial data.</p>
<p>The library comes with built-in support for a wide range of commercial and free image and vector tile sources, and the most popular open and proprietary vector data formats. With OpenLayers&#39;s map projection support, data can be in any projection.</p>
<h2 id="public-api">Public API</h2>
<p>OpenLayers is available as <a href="https://npmjs.com/package/ol"><code>ol</code> npm package</a>, which provides all modules of the officially supported <a href="../../apidoc">API</a>.</p>
<h2 id="renderers-and-browser-support">Renderers and Browser Support</h2>
<p>By default, OpenLayers uses a performance optimized Canvas renderer.</p>
<p>OpenLayers runs on all modern browsers that support <a href="https://html.spec.whatwg.org/multipage/">HTML5</a> and <a href="http://www.ecma-international.org/ecma-262/5.1/">ECMAScript 5</a>. This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, <a href="http://polyfill.io">polyfills</a>, the application bundle needs to be transpiled (e.g. using <a href="https://babeljs.io">Babel</a>) and bundled with polyfills for <code>fetch</code>, <code>requestAnimationFrame</code>, <code>Element.prototype.classList</code>, <code>URL</code> and <code>TextDecoder</code>.</p>
<p>The library is intended for use on both desktop/laptop and mobile devices, and supports pointer and touch interactions.</p>
<h2 id="module-and-naming-conventions">Module and Naming Conventions</h2>
<p>OpenLayers modules with CamelCase names provide classes as default exports, and may contain additional constants or functions as named exports:</p>
<pre><code class="language-js">import Map from <span class="string">'ol/Map'</span>;
import View from <span class="string">'ol/View'</span>;</code></pre>
<p>Class hierarchies grouped by their parent are provided in a subfolder of the package, e.g. <code>layer/</code>.</p>
<p>For convenience, these are also available as named exports, e.g.</p>
<pre><code class="language-js">import {Map, View} from <span class="string">'ol'</span>;
import {Tile, Vector} from <span class="string">'ol/layer'</span>;</code></pre>
<p>In addition to these re-exported classes, modules with lowercase names also provide constants or functions as named exports:</p>
<pre><code class="language-js">import {getUid} from <span class="string">'ol'</span>;
import {fromLonLat} from <span class="string">'ol/proj'</span>;</code></pre>

</div>

    <footer>
      Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.  All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>. Thanks to our <a href='/sponsors.html'>sponsors</a>.
      <br>
      <a href="https://www.netlify.com">
        This site is powered by Netlify.
      </a>
    </footer>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
    
  </body>
</html>
